<template>
    <el-form ref="formRef" :model="formData" label-width="150px">

        <el-form-item label="名称" prop="name">
            <el-input v-model="formData.name" />
        </el-form-item>

        <el-form-item label="描述" prop="description">
           <el-input v-model="formData.description" />
        </el-form-item>

        <el-form-item class="button">
            <el-button type="primary" @click="onCheckAndSubmit(formRef)">新增</el-button>
            <el-button @click="resetForm(formRef)">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">


import { rolesApi } from '@/api';
import { ElMessage } from 'element-plus'

const formRef = ref();
const formData = reactive<any>({
   name:"",
   description:""
})



onMounted(() => {


})

const onSubmit = () => {


    let body: any = {}
    body.name = formData.name
    body.description = formData.description
    console.log(body)

    rolesApi.insert(body).then((res: any) => {
        ElMessage.success('新增成功')

    })
}

const onCheckAndSubmit = async (formEl: any) => {

    await formEl.validate((valid: any, fields: any) => {
        if (valid) {
            onSubmit()
        } else {
            console.log('error submit!', fields)
        }
    })
}
const resetForm = (formEl: any) => {

    formEl.resetFields()
}
</script>